{{set . "title" "模板列表"}}
<!-- 筛选区域 - 科技风格 -->
<div class="mb-8 bg-cyber-dark bg-opacity-70 backdrop-blur-sm p-5 rounded-lg border border-cyber-blue border-opacity-30 shadow-neon-blue">
    <div class="flex flex-wrap items-center">
        <div class="mr-4 mb-2 inline-flex flex-wrap items-center gap-2">
            <span class="text-sm text-gray-300 mr-2 font-rajdhani">分类:</span>
            <a href="?" class="px-3 py-1 text-sm rounded-full font-rajdhani {{if eq 0 $.currentCategory}}bg-cyber-blue bg-opacity-20 text-cyber-blue border border-cyber-blue border-opacity-50{{else}}bg-cyber-dark bg-opacity-50 text-gray-300 border border-gray-600 hover:border-cyber-blue hover:text-cyber-blue transition-all duration-300{{end}}">全部</a>
            {{range $category := .categories}}
            <a href="?category={{$category.Id}}{{if gt $.currentTag 0}}&tag={{$.currentTag}}{{end}}" class="px-3 py-1 text-sm rounded-full font-rajdhani {{if eq $category.Id $.currentCategory}}bg-cyber-blue bg-opacity-20 text-cyber-blue border border-cyber-blue border-opacity-50{{else}}bg-cyber-dark bg-opacity-50 text-gray-300 border border-gray-600 hover:border-cyber-blue hover:text-cyber-blue transition-all duration-300{{end}}">{{$category.Title}}</a>
            {{end}}
        </div>
        {{if and .tags (len .tags)}}
        <div class="mt-2 mb-2 inline-flex flex-wrap items-center gap-2">
            <span class="text-sm text-gray-300 mr-2 font-rajdhani">标签:</span>
            {{range $tag := .tags}}
            <span class="px-3 py-1 text-sm rounded-full bg-cyber-purple bg-opacity-20 text-cyber-purple border border-cyber-purple border-opacity-50 flex items-center font-rajdhani">
                {{$tag.Title}}
                <a href="?{{if gt $.currentCategory 0}}category={{$.currentCategory}}{{end}}" class="ml-1 text-cyber-purple hover:text-white" title="删除筛选">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                    </svg>
                </a>
            </span>
            {{end}}
        </div>
        {{end}}
        
    </div>
</div>

<!-- 模板网格 -->
<div class="masonry-grid columns-2 sm:columns-2 lg:columns-3 xl:columns-4 gap-4 sm:gap-6 space-y-4 sm:space-y-6">
    {{range $template := .templates}}
    <div class="break-inside-avoid mb-4 sm:mb-6">
        <a href="/templates/{{$template.Id}}" class="bg-cyber-dark bg-opacity-80 rounded-lg border border-gray-700 transition-all hover:border-cyber-blue hover:shadow-neon-blue group block no-underline overflow-hidden">
            <div class="relative overflow-hidden">
                <img src="{{$template.Thumb}}" class="w-full object-cover rounded-t-lg transform group-hover:scale-105 transition-transform duration-500" alt="{{$template.Title}}">
                <div class="absolute inset-0 bg-gradient-to-t from-cyber-dark to-transparent opacity-50"></div>
                <div class="absolute inset-0 bg-cyber-blue opacity-0 group-hover:opacity-10 transition-opacity duration-300"></div>
            </div>
            <div class="p-3 sm:p-4">
                <h3 class="text-white text-sm sm:text-lg font-rajdhani font-medium line-clamp-1 group-hover:text-cyber-blue transition-colors">{{$template.Title}}</h3>
                <div class="flex flex-col sm:flex-row sm:justify-between sm:items-center mt-2 gap-1 sm:gap-2">
                    <p class="text-xs sm:text-sm text-gray-400 font-rajdhani truncate">{{$template.Updated}}</p>
                    <div class="text-xs text-white bg-gradient-to-r from-cyber-blue to-cyber-purple px-2 sm:px-3 py-1 rounded-full font-rajdhani inline-flex items-center justify-center hover:opacity-90 transition-opacity">
                        <span class="hidden sm:inline">查看详情</span>
                        <span class="sm:hidden">详情</span>
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                        </svg>
                    </div>
                </div>
            </div>
        </a>
    </div>
    {{else}}
    <div class="text-center py-12 text-gray-400 col-span-full font-rajdhani">
        暂无模板数据
    </div>
    {{end}}
</div>

<!-- 分页 -->
{{include "partials/pagination.html" .}}
